<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./image/1.jpg" alt="">
    <div>
        <button onclick="changImg()">换图</button>
        <button onclick="MaxImg()">放大</button>
        <button onclick="MinImg()">缩小</button>
    </div>
    <script>
        // let index = 1
        function changImg(){
            // 选择器
            // let img=document.querySelector("img")
            // alert(img)
            // console.log(img)
            // 换图方法一
            // console.log(img.src)
            // if(index == 1){
            //     img.src="./image/2.jpg";
            //     index = 0
            // }else{
            //     img.src="./image/1.jpg"
            //     index = 1
            // }
            // 换图方法二
            let img=document.querySelector("img")
            console.log(img.getAttribute("src"))
            if(img.getAttribute("src")=="./image/1.jpg"){
                img.src="./image/2.jpg";
                
            }else{
                img.src="./image/1.jpg"
                
            }
        }
        function MaxImg(){
            let img=document.querySelector("img")
            img.width *=1.5
            img.height *=1.5
        }
        function MinImg(){
            let img=document.querySelector("img")
            img.width /= 1.5
            img.height /=1.5
        }
    </script>
</body>
</html>